<template>
  <div id="employeeInfo">
    <div class="title"></div>
    <div class="content">
      <div  class="person_info " v-if="personBasicInfo" >
        <div class="title"> {{personBasicInfo.firstName?personBasicInfo.firstName:""}}{{personBasicInfo.mi?' '+personBasicInfo.mi:""}}{{personBasicInfo.lastName?' '+personBasicInfo.lastName:""}}<span v-touch-ripple class="close_icon r" @click="back">X</span></div>
        <el-tooltip class="item" effect="dark" content="click to edit your header image" placement="right">
          <div class="avatar">
            <img :src="personBasicInfo.headImg">
            <div v-touch-ripple  class="avatar_edit_div iconfont" @click="showImgCropper=true">&#xe607;</div>
          </div>
        </el-tooltip>
        <div class="content animated fadeIn">
          <el-tabs type="" v-model="activeTab" class="person_tab" @tab-click="clickTab">
            <el-tab-pane  name="payInfo" >
              <span v-touch-ripple slot="label">Pay Info</span>
              <Row class="pay_info" v-if="oPersonPayInfo">
                <i-col :span="11" class="pay_info_text">
                  <!--编辑按钮-->
                  <div v-touch-ripple class="iconfont pay_info_edit_icon" @click="editInfo">&#xe607;</div>
                  <Row class="pay_info_row">
                    <i-col class="key" :span="11">Pay Rate</i-col>
                    <i-col class="value" :span="12" :offset="1" v-if="oPersonPayInfo.unit&&oPersonPayInfo.payRate&&oPersonPayInfo.payRangeName">{{oPersonPayInfo.unit +' ' +oPersonPayInfo.payRate +" / " + oPersonPayInfo.payRangeName}}</i-col>
                  </Row>
                  <Row class="pay_info_row">
                    <i-col class="key" :span="11">Pay Schedule</i-col>
                    <i-col class="value" :span="12" :offset="1">{{oPersonPayInfo.payScheduleName?oPersonPayInfo.payScheduleName:""}}</i-col>
                  </Row>
                  <Row class="pay_info_row">
                    <i-col class="key" :span="11">Payment Method</i-col>
                    <i-col class="value" :span="12" :offset="1">{{oPersonPayInfo.payMethod?oPersonPayInfo.payMethod:""}}</i-col>
                  </Row>
                  <Row class="pay_info_row">
                    <i-col class="key" :span="11">Taxes</i-col>
                    <i-col class="value" :span="12" :offset="1">{{oPersonPayInfo.taxes?oPersonPayInfo.taxes:""}}</i-col>
                  </Row>
                  <Row class="pay_info_row">
                    <i-col class="key" :span="11">Deductions</i-col>
                    <i-col class="value" :span="12" :offset="1">
                      <template v-for="(item,key) in oPersonPayInfo.employeeDeduction">
                        <div class="value_key">{{item.deductionName?item.deductionName:""}}</div>
                        <div class="value_key_value">
                          {{item.amount + ' ' + item.amountType}}<br>
                          {{item.annualMax}} max
                      </div>
                      </template>
                    </i-col>
                  </Row>
                  <Row class="pay_info_row">
                    <i-col class="key" :span="11">Company-paid Contributions</i-col>
                    <i-col class="value" :span="12" :offset="1">
                      <template v-for="(item,key) in oPersonPayInfo.companyDeduction">
                        <div class="value_key">{{item.deductionName}}</div>
                        <div class="value_key_value">
                          {{item.amount + ' ' + item.seperator +' '+ item.amountType}}<br>
                        </div>
                      </template>
                    </i-col>
                  </Row>
                </i-col>
                <!--right card-->

                <i-col class="pay_info_tip" :span="11" :offset="2" v-if="isShowRight" >
                  <div class="top">
                    <p>Sample check
                    <span class="change_item" v-if="baseType ==0" @click.self="changeBaseType">( Based  on <el-input type="number" v-model="hourPay" style="width: 60px" :min="0" :controls="false" @blur="getExperiencePayRoll"></el-input> regular hours per pay period )</span>
                      <!-- <span class="change_item" v-if="baseType ==1" @click.self="changeBaseType">( Based on the pay schedule and rate you enter )</span>-->
                      <span class="change_item" v-if="baseType ==1" @click.self="changeBaseType">( Based on a commission of $ <el-input type="number" v-model="commisionPay" style="width: 60px" @blur="getExperiencePayRoll"></el-input> )</span>
                    </p>
                    <p>daydao.inc</p>
                    <p>2102 Fairway Drive San Francisco, CA94103</p>
                    <p class="pay_name">
                      <span class="active_color">Pay To</span><span class="name">{{personBasicInfo.firstName?personBasicInfo.firstName:""}}{{personBasicInfo.mi?' '+personBasicInfo.mi:""}}{{personBasicInfo.lastName?' '+personBasicInfo.lastName:""}}</span>
                    </p>
                    <p class="pay_money" v-if="experiencePayRoll"> {{experiencePayRoll.unit?experiencePayRoll.unit:""}}{{experiencePayRoll.netPay?experiencePayRoll.netPay:""}}</p>
                  </div>
                  <div class="pay_info_main animated fadeIn"  v-if="experiencePayRoll">
                    <div class="item" v-if="experiencePayRoll.grossPay">
                      <p class="item_name">Gross Pay</p>
                      <Row>
                        <i-col :span="12">{{experiencePayRoll.grossPay.payItem?experiencePayRoll.grossPay.payItem:""}}</i-col>
                        <i-col :span="12">{{experiencePayRoll.unit}}{{experiencePayRoll.grossPay.totalAmount?experiencePayRoll.grossPay.totalAmount:0}}</i-col>
                      </Row>
                    </div>

                    <div class="item" v-if="experiencePayRoll.deductionList&&experiencePayRoll.deductionList.length">
                      <p class="item_name">Deductions</p>
                      <Row v-for="(item,key) in experiencePayRoll.deductionList" :key="item">
                        <i-col :span="12">{{item.deductionName?item.deductionName:0}}</i-col>
                        <i-col :span="12">{{experiencePayRoll.unit?experiencePayRoll.unit:""}}{{item.amount?item.amount:0}}</i-col>
                      </Row>
                    </div>
                    <div class="item" v-if="experiencePayRoll.taxList" >
                      <p class="item_name">TAXES WITHHELD</p>
                      <Row v-for="(item,key) in experiencePayRoll.taxList" :key="item">
                        <i-col :span="12">{{item.statiscItem?item.statiscItem:""}}</i-col>
                        <i-col :span="12">{{experiencePayRoll.unit?experiencePayRoll.unit:""}}{{item.amount?item.amount:0}}</i-col>
                      </Row>
                    </div>
                    <div class="item" v-if="experiencePayRoll.summaryList">
                      <p class="item_name">SUMMARY</p>
                      <Row v-for="(item,key) in experiencePayRoll.summaryList" :key="item">
                        <i-col :span="12">{{item.statiscItem?item.statiscItem:""}}</i-col>
                        <i-col :span="12">{{experiencePayRoll.unit?experiencePayRoll.unit:""}}{{item.amount?item.amount:0}}</i-col>
                      </Row>
                    </div>
                    <div class="item">
                      <Row>
                        <i-col :span="12" class="item_name">Net pay this check</i-col>
                        <i-col :span="12">{{experiencePayRoll.unit?experiencePayRoll.unit:""}}{{experiencePayRoll.netPay?experiencePayRoll.netPay:0}}</i-col>
                      </Row>
                    </div>
                  </div>
                  <div class="bottom_circle">
                    <span v-for="key in 11" :key="key" class="circle_item" :style="{left:50*key +'px',bottom:Math.random()*(-40)-11+'px'}"></span>
                  </div>
                </i-col>
              </Row>
            </el-tab-pane>
            <el-tab-pane class="person_info" label="Person Info" name="personInfo">
              <!--编辑按钮-->
              <span v-touch-ripple class="iconfont person_info_edit_icon" @click="editInfo">&#xe607;</span>

              <Row class="person_info_row">
                <i-col :span="6"><span class="font-bold font-middle">EmployeeId：</span>{{personBasicInfo.employeeCode?personBasicInfo.employeeCode:""}}</i-col>
                <i-col :span="6"><span class="font-bold font-middle">Hire Date：</span>{{personBasicInfo.hireDate?personBasicInfo.hireDate:""}}</i-col>
                <i-col :span="6"><span class="font-bold font-middle">Status：</span>{{personBasicInfo.status?personBasicInfo.status:""}}</i-col>
              </Row>
              <Row class="person_info_row">
                <i-col :span="6"><span class="font-bold font-middle">Gender：</span>{{personBasicInfo.gender?personBasicInfo.gender:""}}</i-col>
                <i-col :span="6"><span class="font-bold font-middle">Birth Date：</span>{{personBasicInfo.birthDate?personBasicInfo.birthDate:""}}</i-col>
              </Row>
              <Row class="person_info_row">
                <i-col :span="24"><span class="font-bold font-middle">Work Location：</span>{{personBasicInfo.workLocation?personBasicInfo.workLocation:""}}</i-col>
              </Row>
              <Row class="person_info_row">
                <i-col :span="24"><span class="font-bold font-middle">Home Address：</span>{{personBasicInfo.homeAddress?personBasicInfo.homeAddress:""}}</i-col>
              </Row>
              <Row class="person_info_row">
                <i-col :span="24"><span class="font-bold font-middle">Email：</span>{{personBasicInfo.email?personBasicInfo.email:""}}</i-col>
              </Row>
            </el-tab-pane>
            <el-tab-pane class="pay_checklist" label="Pay Checklist" name="personPayCheckList">

              <Row class="table_top_operator">
                <i-col :span="4">
                  <el-select v-model="dateSelectModel" placeholder="select">
                    <el-option
                      v-for="(item,key) in selectDateList" :key="item"
                      :label="item.showName"
                      :value="item.showName+'==!'+item.startDate+'=='+item.endDate ">
                    </el-option>
                  </el-select>
                </i-col>
              </Row>

              <el-table v-if="tableData" ref="payTable"
                        :data="personPayCheckList"
                        border
                        :max-height="350"
                        emptyText="You did not have any payroll in the selected period"
                        @selection-change=""
                        @sort-change=""
                        @row-dblclick="tableDoubleClick"
                        @selection-change = "">
                <!--序列号-->
                <el-table-column
                  type="index"
                  label="No."
                  width="60">
                </el-table-column>
                <template v-for="(value,key) in tableData.column" >
                  <el-table-column  :key="value.name"
                                    :show-overflow-tooltip = 'true'
                                    :prop="value.name"
                                    :label="value.title"
                                    :min-width="value.width?value.with:100"
                                    :sortable = "value.isSortable ? 'custom':false"
                                    inline-template
                  >
                   <span>
                    <span v-if="value.name =='totalPay' || value.name =='netPay'">{{row['unit'] ?row['unit'] :""}}</span>
                    {{row[value.name] ?row[value.name] :""}}
                  </span>
                  </el-table-column>
                </template>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <d-Modal v-if="showImgCropper" @close="showImgCropper = false">
          <span slot="header">image Cropper</span>
          <div slot="body" class="upLoad_panel">
            <d-img-cropper @close="showImgCropper = false"   @cropper-ok="uploadHeaderConfirm"></d-img-cropper>
          </div>
        </d-Modal>
      </div>
    </div>
  </div>
</template>

<script>
  import dPanel from 'src/components/common/Panel.vue';
  import dModal from 'src/components/common/Modal.vue';
  import avatar from 'src/assets/images/avatar.png';
  import dImgCropper from 'src/components/common/ImgCropper.vue';
  export default {
    components:{
      dPanel,
      dModal,
      dImgCropper
    },
    data:function(){
      return{
        avatar:avatar,
        activeTab:'payInfo',
        showImgCropper:false,
        tableData:{
          column:[
            {title:'PAY DATE',name:'payDate'},
            {title:'NAME',name:'personName'},
            {title:'TOTAL PAY',name:'totalPay'},
            {title:'NET PAY',name:'netPay'},
            {title:'PAY METHOD',name:'payMethod'},
            {title:'CHECK NUMBER',name:'checkMember'},
          ],
       },
       dateSelectModel:null,
       baseType:0,
       commisionPay:null,
       hourPay:null,
      }
    },
    created:function(){
      this.getPersonBasicInfo();
      this.getPayInfo();
      this.getSelectDateList();
    },
    activated:function () {
      /*this.getPersonBasicInfo();
      this.getPayInfo();
      this.getSelectDateList();*/
    },

    deactivated:function(){
      this.activeTab ='payInfo'
      this.dateSelectModel = null;
      this.$store.commit('setCommonStateData',{key:'personPayChecks',data:{pb:null,list:null}});
    },
    computed:{
      personBasicInfo(){
       return this.$store.getters.personBasicInfo;
      },
      oPersonPayInfo(){
        return this.$store.getters.oPayInfo;
      },
      selectDateList(){
        return this.$store.getters.selectDateList;
      },
      personPayCheckList(){
        return this.$store.getters.personPayCheckList;
      },
      isShowRight(){
        if(this.oPersonPayInfo){
          return this.oPersonPayInfo.unit&&this.oPersonPayInfo.payRate&&this.oPersonPayInfo.payRangeName&&this.oPersonPayInfo.payScheduleId&&this.oPersonPayInfo.employerDeduction&&this.oPersonPayInfo.employerDeduction.length;
        }
        return  false;
      },
      experiencePayRoll(){
        return this.$store.getters.experiencePayRoll;
      }
    },
    watch:{
      dateSelectModel:function(newValue){
          if(!newValue) return;
        var value =  newValue.split('==!')[1];
        this.$store.dispatch('getPayCheckList',{startDate:value.split("==")[0],endDate:value.split("==")[1],personId:this.$route.params.id});
      },
    },
    mounted:function(){
    },
    methods:{
      back:function(){
        this.$router.back();
      },
      getPersonId(){
        return this.$route.params.id;
      },
      getPersonBasicInfo(){
       this.$store.dispatch('getPersonBasicInfo',{personId:this.getPersonId()});
      },
      getPayInfo(){
        this.$store.dispatch('getPayInfo',{personId:this.getPersonId()});
      },
      getSelectDateList(){
        this.$store.dispatch('getPayCheckSelectDate');
      },
      clickTab(tab){
        //this.$store.commit("setEmployeeInfoActiveTab",tab.name)
      },
      editInfo(){
         var tabName = this.activeTab;
         var personId = this.getPersonId();
         switch (tabName){
           case 'payInfo':
              this.$store.commit('setCommonStateData',{key:'editModel',data:null});
              this.$router.push('/payRoll/payRollCenter/employeeInfo/payEdit/'+personId);
               break;
           case 'personInfo':
             this.$router.push('/payRoll/payRollCenter/employeeInfo/personEdit/'+personId);
             break;
           case 'payInfo':
             break;
         }
      },
       //上传头像+++++++++666666666666666666633
      uploadHeaderConfirm:function(blob){
        var t = this;
        var formData = new FormData();
        formData.append('personId', t.getPersonId());
        formData.append('headImg', blob);

       t.$store.dispatch('uploadHeadImg',{param:formData,success:()=>{
          t.showImgCropper = false;
        t.$message.success('upload header image success');
        t.getPersonBasicInfo();
        //...any others eg. update fathers and self

      }})
      },
      changeBaseType(type){
          if(this.baseType<1){
            this.baseType++;
          }else{
            this.baseType=0
          }
          this.getExperiencePayRoll();
      },
      getExperiencePayRoll:function () {
        this.$store.commit('setCommonStateData',{key:'experiencePayRoll',null});
        var param ={
          personId:parseInt(this.getPersonId()),
          hour:0,
          commision:0
        }
        if(this.baseType == 0 && this.hourPay){
          this.hourPay = isNaN(parseInt( this.hourPay))? 0.0 :this.hourPay;
          param.hour = this.hourPay;
          this.$store.dispatch('getExperiencePayRoll',param);
        }/*else if(this.baseType == 1){
          this.$store.dispatch('getExperiencePayRoll',param);
        }*/else if(this.baseType == 1 &&this.commisionPay){
          this.commisionPay = isNaN(parseInt( this.commisionPay))? 0.0 :this.commisionPay;
          param.commision = this.commisionPay;
          this.$store.dispatch('getExperiencePayRoll',param);
        }
      },
      tableDoubleClick(row){
        var personId = row.personId;
        var payInfoId = row.payInfoId;
        this.$router.push('/payRoll/payRollCenter/payCheckList/PayCheckDetail/'+payInfoId +"?personId="+personId);
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
  #employeeInfo{
    >.content{
      padding: 0;
    }
  }
    .person_info {
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      .title {
        line-height: 110px;
        background-color: $activeColor;
        padding: 0 20px 0 200px;
        font-size: 30px;
        color:#fff;
      }
      .avatar{
        margin-top: -80px;
        margin-left: 30px;
        display: inline-block;
        border: 1px #dddddd solid;
        position: relative;
        overflow: hidden;
        transition: all .3s;
        padding: 4px;
        background-color: #fff;
        img{
          display: block;
          width: 110px;
          height: 118px;
          transition: all .3s ease-in-out;
        }
        .avatar_edit_div{
          position: absolute !important;
          top: 4px;
          left: 4px;
          right: 4px;
          bottom: 4px;
          background-color: rgba(0,0,0,.5);
          text-align: center;
          line-height: 117px;
          opacity: 0;
          cursor: pointer;
          font-size: 30px;
          color: $activeColor;
          transition: all .5s ease-in-out;
        }
        &:hover{
          .avatar_edit_div{
            display: block;
          }
          img{
            transform: scale(1.1);
          }
          .avatar_edit_div{
            opacity: 1;
          }
        }
      }
      .content {
        padding: 20px 30px;
        margin-bottom: 20px;
        .person_tab{
          width: 100%;
          .el-tabs__content{
            padding: 20px;
            .pay_info{
              .pay_info_text{
                position: relative;
                .pay_info_edit_icon {
                  position: absolute !important;
                  right: 0;
                  top: 0;
                  cursor: pointer;
                  z-index: 100;
                  &:hover{
                    color: $activeColor;
                  }
                }
                .pay_info_row{
                  line-height: 40px;
                  border-bottom: 1px #dddddd solid;
                  &:last-child{
                    border: 0;
                  }
                  .key{
                    font-weight: bold;
                  },
                  .value{
                    .value_key{
                      font-weight: bold;
                      line-height: 30px;
                     }
                    .value_key_value{
                      line-height: 30px;
                    }
                  }
                }
              }
              .pay_info_tip{
                min-height: 460px;
                box-shadow: 0 0 11px 4px #ddd;
                border: 1px #efefef solid;
                padding: 20px;
                background: -webkit-linear-gradient(bottom, #fff , rgba(91,163,229,.15),rgba(91,163,229,.1),rgba(91,163,229,.3)); /* Safari 5.1 - 6.0 */
                background: -o-linear-gradient(bottom,#fff , rgba(91,163,229,.15),rgba(91,163,229,.1),rgba(91,163,229,.3)); /* Opera 11.1 - 12.0 */
                background: -moz-linear-gradient(bottom, #fff ,  rgba(91,163,229,.15),rgba(91,163,229,.1),rgba(91,163,229,.3)); /* Firefox 3.6 - 15 */
                background: linear-gradient(to bottom, #fff, rgba(91,163,229,.15),rgba(91,163,229,.1),rgba(91,163,229,.3)); /* 标准的语法 */
                position: relative;
                overflow: hidden;
                >.top{
                  border: 1px rgba(91,163,229,.3) solid;
                  padding: 20px 12px;
                  border-radius: 4px;
                  line-height: 24px;
                  font-size: 13px;
                  .change_item{
                    margin-left: 10px;
                    color: $activeColor;
                    cursor: pointer;
                  }
                  .pay_name{
                    line-height: 50px;
                    font-size: 14px;
                    .name{
                      font-size: 20px;
                      margin-left: 50px;
                    }
                  }
                  .pay_money{
                    text-align: right;
                    padding-right: 50px;
                    font-size: 23px;
                  }
                }
                .pay_info_main{
                  padding: 20px 10px 50px 10px;
                  >.item{
                    line-height: 20px;
                    margin-bottom: 10px;
                    .item_name{
                      line-height: 30px;
                      font-size: 14px;
                      color: $activeColor;
                    }
                  }
                }
                .bottom_circle{
                  .circle_item{
                    position: absolute;
                    bottom: -20px;
                    left: -2px;
                    width: 70px;
                    height: 70px;
                    background-color: #fff;
                    border-radius: 50%;
                    &:first-child{
                      bottom: -80px !important;
                      left: -20px !important;
                      width: 140px;
                      height: 140px;
                    }
                  }
                }

              }
            }
            .person_info{
              line-height: 50px;
              padding: 20px;
              box-sizing: border-box;
              position: relative;
              .person_info_edit_icon{
                position: absolute !important;
                right: 20px;
                top: 0;
                cursor: pointer;
                z-index: 100;
                &:hover{
                  color: $activeColor;
                }
              }
              .person_info_row{
                border-bottom: 1px #dddddd solid;
              }
            },
            .pay_checklist{
              .table_top_operator{
                margin-bottom: 10px;
              }

            }
          }
        }
      }
    }
    /*上传头像*/
    .upLoad_panel{
      padding: 20px;
    }
</style>
